<template>
	<div class="relationshipUserinfo">
		<el-dialog title="" :visible.sync="pageIsShow" width="280px" center :destroyOnClose='true'
			:modal-append-to-body="false" @closed="handleClosed">
			<div class="textCenter" v-show="userinfo">
				<div>{{userinfo.username}} </div>
				<div class="color-smill font12">ID:{{userinfo.Id}}</div>
				<div><el-image style="width: 100px;height: 100px;" class=" borderr50"
						:src="userinfo.url+'?w=100&h=100&q=75'" fit="fill"></el-image>
				</div>
				{{userinfo.Integral}}
				<div class="" v-show="userinfo.gender">
					<i class="el-icon-male" style="color: #00f;font-size: 18px;"></i>
				</div>
				<div class="" v-show="!userinfo.gender">
					<i class="el-icon-female" style="color: #ff58b5;font-size: 18px;"></i>
				</div>
				<div class="">
					<template class="" v-for="(item,index) in userinfo.hobbylist">
						<el-tag class="marginL5 marginT5" :key="`hobbytag${index}`"
							:type="tagType[parseInt(Math.random(1) * 5)]">{{item}}</el-tag>
					</template>
				</div>
				<!-- <div class="color-smill iconfont icon-qianming shs-signature" v-show="userinfo.signature">
					{{userinfo.signature}}</div> -->
				<div><container-page :text="userinfo.signature"></container-page></div>
			</div>
			<div v-show="!userinfo" class="color-smill textCenter">
				用户状态异常
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button v-if="isshowReal" type="primary" @click="handleAdd" v-loading="loading">加好友</el-button>
			</span>

		</el-dialog>
	</div>
</template>

<script>
	import {
		debounce
	} from "@/utils/common.js";
	import {
		getUserInfo
	} from "@/api/user"

	import {
		creatContacts
	} from "@/api/relationshipUser"
	import containerPage from "@/components/container/index"
	export default {
		name: "relationship",
		props: {

		},
		components: {
			containerPage
		},
		data() {
			return {
				pageIsShow: false, //页面显示
				loading: false, //loding
				userinfo: {},
				isshowReal: false, //是否是联系人
				tagType: ["", "success", "info", "warning", "danger"]
			}
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			handleAdd: debounce(function() {
				try {
					this.loading = true;
					let obj = {
						userId: this.$store.getters.userInfo.Id,
						otherId: this.userinfo.Id,
						otherUsername: this.userinfo.username,
						otherUrl: this.userinfo.url
					}
					creatContacts(obj).then(res => {
						this.$message({
							message: res.message || "success",
							type: "success",
							duration: 1000
						})
						this.loading = false
					})
				} catch (e) {

				}
			}),

			//初始化页面 value 是否显示
			initData(show, id, list) {
				try {
					this.pageIsShow = show;
					if (list.indexOf(id) == -1 && this.$store.getters.userInfo.Id != id) {
						this.isshowReal = true
					}
					//使用缓存
					if (this.userinfo.Id != undefined && id == this.userinfo.Id) {
						return;
					}
					getUserInfo({
						id
					}).then(data => {
						this.userinfo = {
							...data.data
						}
						if (data.data.hobbylist) {
							this.userinfo.hobbylist = data.data.hobbylist.split(",")
						} else {
							this.userinfo.hobbylist = []
						}

					})
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 隐藏页面
			handleHiddle(v) {
				this.pageIsShow = v;
			},
			//删除数据
			handleDeleteNumber() {

			},
			//关闭的回调
			handleClosed() {
				this.pageIsShow = false
				this.loading = false
				// this.userinfo = {}//不清空
				this.isshowReal = false
			},


		},
		watch: {}
	}
</script>

<style scoped>
	.relationshipUserinfo :deep(.el-dialog) {
		width: 65%;
		min-width: 65% !important;
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;
	}

	.relationshipUserinfo :deep(.el-dialog .el-button) {
		border-radius: 18px;
	}
</style>